<template>
  <div class="plugin-box">
    <BetweenLayout>
      <template #left>
        <n-card title="声明 Plugin">
          <n-code :code="mixinCode" language="javascript" />
        </n-card>
        <n-card title="App 注入 ">
          <n-code :code="appPluginCode" language="javascript" />
        </n-card>
        <n-card title="创建空一个 store">
          <n-code :code="pluginStoreCode" language="javascript" />
        </n-card>
      </template>
      <template #right>
        <n-button-group>
          <n-button round ghost type="info" size="large" @click="html">
            引入
          </n-button>
          <n-button ghost type="info" size="large" @click="add">
            增加+
          </n-button>
          <n-button ghost type="info" size="large" @click="reduce">
            减少-
          </n-button>
          <n-button round ghost type="info" size="large" @click="fetchStorage">
            获取sessionStorage
          </n-button>
        </n-button-group>
        <n-card class="mt-20 fs-22">
          <div v-if="status !== 4">
            <n-icon>
              <ExtensionPuzzleOutline />
            </n-icon>
            插件 store[plugin] : {{ storePlugin }}
            <br />
            <n-icon>
              <ExtensionPuzzleOutline />
            </n-icon>
            异步 store[plugin] : {{ asyncPlugin }}
          </div>
          <div v-else>
            <n-icon>
              <ServerOutline />
            </n-icon>
            本地sessionStorage的值 : {{ storage }}
          </div>
        </n-card>
        <Tip v-if="codeNow" type="code" :text="codeNow" />
        <Tip v-if="tipNow" type="tip" :text="tipNow" />
        <Tip v-if="status === 1" title="Plugin的作用" :text="tip1" type="tip" />
      </template>
    </BetweenLayout>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from 'vue'
import { loading } from '@/utils/loading'
import { pluginStore } from '@/store/plugin.store'
import { asyncStore } from '@/store/async.store'
import BetweenLayout from '@/components/BetweenLayout/index.vue'
import Tip from '@/components/Tip/index.vue'
import { ExtensionPuzzleOutline, ServerOutline } from '@vicons/ionicons5'
import { runCode } from '@/utils/runCode'
import { runTip } from '@/utils/runTip'
import { getStorage } from '@/utils/index'
import {
  htmlCode,
  tip1,
  tip2,
  tip3,
  mixinCode,
  appPluginCode,
  pluginStoreCode,
  addCode,
  reduceCode,
  getStorageCode
} from './code'
export default defineComponent({
  components: {
    BetweenLayout,
    Tip,
    ExtensionPuzzleOutline,
    ServerOutline
  },
  setup() {
    loading()
    // * 本地的值
    const storage = ref('')

    // * store
    const pluginStoreCase = pluginStore()
    const asyncStoreCase = asyncStore()

    // * 获取的 plugin 的值
    const storePlugin = computed(() => pluginStoreCase.plugin)
    const asyncPlugin = computed(() => asyncStoreCase.plugin)

    // * 当前状态
    const status = ref(1)
    //  * 设置当前状态
    const setStatus = e => {
      status.value = parseInt(e)
    }

    // * 当前使用的code
    const { codeNow, setCode } = runCode(htmlCode)
    // * 当前使用的提示
    const { tipNow, setTip } = runTip(tip3)

    // * 引用 
    const html = () =>{
      setStatus(1)
      setCode(htmlCode)
      setTip(tip3)
    }
    // * 增加
    const add = () => {
      setStatus(2)
      setTip(tip2)
      setCode(addCode)
      pluginStoreCase.plugin++
    }
    // * 减少
    const reduce = () => {
      setStatus(3)
      setTip(tip2)
      setCode(reduceCode)
      pluginStoreCase.plugin--
    }
    // * 获取本地值
    const fetchStorage = () => {
      setStatus(4)
      setTip('')
      setCode(getStorageCode)
      storage.value = getStorage('pinia')
    }
    return {
      tip1,
      tip2,
      tip3,
      add,
      html,
      storage,
      status,
      codeNow,
      tipNow,
      reduce,
      mixinCode,
      fetchStorage,
      appPluginCode,
      pluginStoreCode,
      storePlugin,
      asyncPlugin
    }
  }
})
</script>

<style lang="scss" scoped>
.fs-22 {
  ::v-deep(*) {
    font-size: 22px;
  }
}
.plugin-box {
}
</style>
